<span
  class="fui-datepicker-lite-wrapper"
  (click)="show()"
  cdkOverlayOrigin
  #origin="cdkOverlayOrigin"
  #trigger
>
  <ng-container *ngIf="!contentTemplate">
    <input
      readonly
      class="fui-datepicker-lite-input"
      placeholder="{{placeholder | translate}}"
      (blur)="onTouched()"
      [value]="valueSource | date:format"
    >
    <span class="fui-datepicker-lite-icon">
      <svg fuiIcon="cross-circle" color="secondary" *ngIf="valueSource && !required" (click)="clearCalendar($event)"></svg>
      <svg fuiIcon="calendar" color="secondary" *ngIf="!valueSource || required"></svg>
    </span>
  </ng-container>
  <ng-container *ngIf="contentTemplate">
    <ng-template [cdkPortalOutlet]="contentTemplate"></ng-template>
  </ng-container>
</span>
<ng-template
  cdkConnectedOverlay
  cdkConnectedOverlayHasBackdrop
  cdkConnectedOverlayBackdropClass="fui-datepicker-lite-backdrop"
  [cdkConnectedOverlayPositions]="positions"
  [cdkConnectedOverlayOrigin]="origin"
  (backdropClick)="hide()"
  (detach)="hide()"
  (positionChange)="onPositionChange($event)"
  [cdkConnectedOverlayOpen]="visible | async"
>
  <div
    class="fui-datepicker-lite-container"
    [ngClass]="classMap"
    [@horizontalShowHide]='isHorizontal ? (visible | async) : false'
    [@verticalShowHide]='isHorizontal ? false : (visible | async)'
  >
    <div class="fui-datepicker-lite-panel">
      <div class="fui-calendar-lite-header">
        <div style="position: relative;" *ngIf="mode !== 'time'">
          <a class="fui-calendar-lite-header-prev-year-btn" (click)="preYear()"></a>
          <a class="fui-calendar-lite-header-prev-month-btn" (click)="preMonth()"></a>
          <span class="fui-calendar-lite-header-ym-select">
            <a class="fui-calendar-lite-header-year-select" (click)="changeDecadeView($event)">{{showYear}}</a>
            <a class="fui-calendar-lite-header-month-select" (click)="changeMonthView()">{{showMonth + 1 | number:'2.0-0'}}</a>
          </span>
          <a class="fui-calendar-lite-header-next-month-btn" (click)="nextMonth()"></a>
          <a class="fui-calendar-lite-header-next-year-btn" (click)="nextYear()"></a>
        </div>
        <div style="position: relative;" *ngIf="mode === 'time'">
          <span class="fui-calendar-lite-header-my-select">
            <a class="fui-calendar-lite-header-year-select">{{selectedYear}}</a>
            <a class="fui-calendar-lite-header-month-select">{{showMonth + 1 | number:'2.0-0'}}</a>
            <a class="fui-calendar-lite-header-day-select">{{selectedDate | number:'2.0-0'}}</a>
          </span>
        </div>
        <div class="fui-calendar-lite-month-panel" *ngIf="mode === 'month'">
          <div>
            <div class="fui-calendar-lite-month-panel-header">
              <a class="fui-calendar-lite-month-panel-header-prev-year-btn" (click)="preYear()"></a>
              <a class="fui-calendar-lite-month-panel-header-year-select" (click)="changeDecadeView($event)">
                <span class="fui-calendar-lite-month-panel-header-year-select-content">{{showYear}}</span>
                <span class="fui-calendar-lite-month-panel-header-year-select-arrow">x</span>
              </a>
              <a class="fui-calendar-lite-month-panel-header-next-year-btn" (click)="nextYear()"></a>
            </div>
            <div class="fui-calendar-lite-month-panel-body">
              <fui-calendar-lite
                [clearTime]="!showTime"
                (clickDayChange)="clickDay($event)"
                (clickMonthChange)="clickMonth($event)"
                [showMonth]="showMonth"
                [showYear]="showYear"
                [value]="value"
                [mode]="'month'"
              >
              </fui-calendar-lite>
            </div>
          </div>
        </div>
        <div class="fui-calendar-lite-year-panel" *ngIf="mode === 'decade'">
          <div>
            <div class="fui-calendar-lite-year-panel-header">
              <a class="fui-calendar-lite-year-panel-header-prev-decade-btn" (click)="preDecade()"></a>
              <a class="fui-calendar-lite-year-panel-header-decade-select">
                <span class="fui-calendar-lite-year-panel-header-decade-select-content">{{startDecade}}-{{startDecade + 9}}</span>
                <span class="fui-calendar-lite-year-panel-header-decade-select-arrow">x</span>
              </a>
              <a class="fui-calendar-lite-year-panel-header-next-decade-btn" (click)="nextDecade()"></a>
            </div>
            <div class="fui-calendar-lite-year-panel-body">
              <table class="fui-calendar-lite-year-panel-table" cellspacing="0" role="grid">
                <tbody class="fui-calendar-lite-year-panel-tbody">
                  <tr *ngFor="let tr of yearPanel">
                    <ng-template ngFor let-td [ngForOf]="tr">
                      <td class="fui-calendar-lite-year-panel-cell fui-calendar-lite-year-panel-last-decade-cell" *ngIf="td=='start'">
                        <a class="fui-calendar-lite-year-panel-year" (click)="preDecade()">{{startDecade - 1}}</a>
                      </td>
                      <td *ngIf="(td!='start')&&(td!='end')" class="fui-calendar-lite-year-panel-cell" [ngClass]="{'fui-calendar-lite-year-panel-selected-cell':(startDecade+td==showYear)}">
                        <a class="fui-calendar-lite-year-panel-year" (click)="setShowYear(startDecade+td,$event)">{{startDecade + td}}</a>
                      </td>
                      <td class="fui-calendar-lite-year-panel-cell fui-calendar-lite-year-panel-next-decade-cell" *ngIf="td=='end'">
                        <a class="fui-calendar-lite-year-panel-year" (click)="nextDecade()">{{startDecade + 10}}</a>
                      </td>
                    </ng-template>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <fui-timepicker-inner
        [ngModel]="valueSource"
        (ngModelChange)="changeTime($event)"
        *ngIf="showTime && (mode === 'time')"
      ></fui-timepicker-inner>

      <div class="fui-calendar-lite-calendar-body">
        <fui-calendar-lite
          [clearTime]="!showTime"
          [disabledDate]="disabledDate"
          (clickDayChange)="clickDay($event)"
          (clickMonthChange)="clickMonth($event)"
          [showMonth]="showMonth"
          [showYear]="showYear"
          [value]="value"
          [mode]="'year'"
        ></fui-calendar-lite>
      </div>

      <div class="fui-calendar-lite-footer">
        <span class="fui-calendar-lite-footer-btn">
          <a class="fui-datetoday-btn" (click)="changeToToday()">{{ (showTime ? 'fui.DATEPICKER.THIS_MOMENT' : 'fui.DATEPICKER.TODAY') | translate }}</a>
          <a class="fui-datetime-picker-btn" (click)="changeTimeView($event)" *ngIf="(mode !== 'time')&&showTime">{{ 'fui.DATEPICKER.CHOOSE_TIME' | translate }}</a>
          <a class="fui-datetime-picker-btn" (click)="changeYearView($event)" *ngIf="(mode === 'time')&&showTime">{{ 'fui.DATEPICKER.CHOOSE_DATE' | translate }}</a>
        </span>
      </div>
    </div>
  </div>
</ng-template>
